<script setup>
import { ref } from "vue";
import router from "@/router/index.js";
import {getImgCode} from "@/api/login.js";
import {getPhoneCode, registerSubForm} from "@/api/register.js";

const checked = ref(false);

const onClickLeft = () => history.back();
const goLogin = () => {
  router.replace({
    path: "/login",
  })
}

/**
 * 注册
 */
const registerForm = ref({
  userAccount: "",
  userPassword: "",
  phone: "",
  code: ""
})

const subRegister = () => {
  if (!verify()) {
    return
  }
  if (registerForm.value.userPassword !== registerForm.value.checkPassword) {
    // eslint-disable-next-line no-undef
    showToast("两次输入的密码不一致")
    return false
  }
  if (!checked.value) {
    // eslint-disable-next-line no-undef
    showToast('请阅读并同意用户协议')
    return false
  }
  registerSubForm(registerForm.value).then((res) => {
    if (res.data.code === 1) {
      // eslint-disable-next-line no-undef
      showToast('注册成功')
      router.replace({
        path: "/login",
      })
    }
  }).catch((error) => {
    console.log(error)
  })
}

/**
 * 校验规则
 */
const verify= () => {
    if(!/^[a-zA-Z0-9]{6,16}$/.test(registerForm.value.userAccount)) {
      // eslint-disable-next-line no-undef
      showToast('账号格式不正确')
      return false
    }
    if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d\S]{6,16}$/.test(registerForm.value.userPassword)) {
      // eslint-disable-next-line no-undef
      showToast('密码格式不正确')
      return false
    }
    if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d\S]{6,16}$/.test(registerForm.value.checkPassword)) {
      // eslint-disable-next-line no-undef
      showToast('密码格式不正确')
      return false
    }
    if (!/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/.test(registerForm.value.phone)) {
      // eslint-disable-next-line no-undef
      showToast('请输入正确的手机号')
      return false
    }
    if (!/^\d{6}$/.test(registerForm.value.code)) {
      // eslint-disable-next-line no-undef
      showToast('请输入正确的短信验证码')
      return false
    }
    return true
}

/**
 * 获取短信验证码
 */
let second = ref(60)
let totalSecond = ref(60)
let timer = ref(null)

const phoneCodeForm = ref({
  phone: "",
  code: "",
  key: ""
})

const getCode = () => {
  if (!/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/.test(registerForm.value.phone)) {
    // eslint-disable-next-line no-undef
    showToast('请输入正确的手机号')
    return false
  }
  if (!/^\w{4}$/.test(phoneCodeForm.value.code)) {
    // eslint-disable-next-line no-undef
    showToast('请输入正确的图形验证码后获取')
    return false
  }
  if(!/^[a-zA-Z0-9]{6,16}$/.test(registerForm.value.userAccount)) {
    // eslint-disable-next-line no-undef
    showToast('账号格式不正确')
    return false
  }
  if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d\S]{6,16}$/.test(registerForm.value.userPassword)) {
    // eslint-disable-next-line no-undef
    showToast('密码格式不正确')
    return false
  }
  if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d\S]{6,16}$/.test(registerForm.value.checkPassword)) {
    // eslint-disable-next-line no-undef
    showToast('密码格式不正确')
    return false
  }
  phoneCodeForm.value = {
    phone: registerForm.value.phone,
    code: phoneCodeForm.value.code,
    key: verifyKey.value
  }

  if (!timer.value && second.value === totalSecond.value) {
    getPhoneCode(phoneCodeForm.value).then((res) => {
      if(res.data.code === 1){
        // eslint-disable-next-line no-undef
        showToast('发送成功，请注意查收')
        // 开启倒计时
        timer.value = setInterval(() => {
          second.value--

          if (second.value < 1) {
            clearInterval(timer.value)
            timer.value = null
            second.value = totalSecond.value
          }
        }, 1000)
      }else{
        // eslint-disable-next-line no-undef
        showToast(res.data.msg)
      }
      console.log(res)
    }).catch((err) => {
      console.log(err)
    })
  }
}


/**
 * 获取图形验证码
 */
const verifyKey = ref(null);
const base64Img = ref(null);
const getPicCode = () => {
  getImgCode().then(res => {
    if (res.data.code === 1) {
      verifyKey.value = res.data.data.key
      base64Img.value = res.data.data.img
    } else {
      // eslint-disable-next-line no-undef
      showToast('图形验证码获取频繁，稍后再试')
    }
  }).catch(err => {
    console.log(err);
  });
};
getPicCode();
</script>

<template>
  <div class="register-page">
    <van-nav-bar
      fixed
      left-arrow
      left-text="返回"
      placeholder
      title="注册"
      @click-left="onClickLeft"
    />
    <div class="register-card">
      <h1>账号注册</h1>
      <p>您注册的账号将与手机号进行绑定</p>
      <div class="register-form">
        <div class="form-item">
          <input v-model="registerForm.userAccount" class="inp" maxlength="16" placeholder="请输入账号(6~16位数字或字母组合)" type="text">
        </div>
        <div class="form-item">
          <input v-model="registerForm.userPassword" class="inp" maxlength="16" placeholder="请输入密码(6~16位)" type="password">
        </div>
        <div class="form-item">
          <input v-model="registerForm.checkPassword" class="inp" maxlength="16" placeholder="请确认密码" type="password">
        </div>
        <div class="form-item">
          <input v-model="registerForm.phone" class="inp" maxlength="16" placeholder="请输入手机号" type="text">
        </div>
        <div class="form-item">
          <input v-model="registerForm.code" class="inp" maxlength="6" placeholder="请输入短信验证码" type="text">
          <button @click="getCode">
            {{ second === totalSecond ? '获取短信验证码' : second+`秒后可重新发送` }}
          </button>
        </div>
        <div class="form-item">
          <input v-model="phoneCodeForm.code" class="inp" placeholder="请输入图形验证码" type="text">
          <img v-if="base64Img" :src="'data:image/png;base64,' + base64Img" alt="" @click="getPicCode">
          <img v-else alt="" src="../../assets/code_fail.png" @click="getPicCode">
        </div>
        <div class="form-item-checked">
          <van-checkbox v-model="checked" style="margin-right: 10px"></van-checkbox>我已阅读本站<router-link to="#">《用户协议》</router-link>
        </div>
        <div class="register-btn" @click="subRegister">注册</div>
        <div class="register-other">
          <span>忘记密码</span>
          <span @click="goLogin">前往登录</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.register-page {
  height: 100vh;
  background: #f8f8f8;
}

.register-page .register-card h1 {
  color: #1e1e1e;
  font-size: 28px;
  font-weight: 500;
  padding: 10px 30px;
}

.register-page .register-card p {
  color: #9e9e9e;
  font-size: 14px;
  padding: 0 30px;
}

.register-card {
  margin-top: 10px;
}

.register-form {
  margin-top: 20px;
  padding: 0 20px;
}

.form-item {
  border-bottom: 1px solid #f3f1f2;
  padding: 8px;
  display: flex;
  align-items: center;
}

.form-item-checked {
  border-bottom: 1px solid #f3f1f2;
  padding: 8px;
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.form-item .inp {
  display: block;
  border: none;
  outline: none;
  height: 32px;
  font-size: 14px;
  flex: 1;
}

.form-item button {
  height: 31px;
  border: none;
  font-size: 13px;
  color: #1647d3;
  background-color: transparent;
  padding-right: 9px;
}

.register-btn {
  width: 100%;
  height: 42px;
  margin-top: 10px;
  background: linear-gradient(90deg, #3cd7ec, #1125ff);
  color: #fff;
  border-radius: 39px;
  box-shadow: 0 10px 20px 0 rgba(0,0,0,.1);
  letter-spacing: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-item img {
  width: 94px;
  height: 31px;
}

.register-btn:active {
  background: linear-gradient(90deg, #3cd7ec, rgba(17, 37, 255, 0.76));
}

.register-other {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding: 0 20px;
  font-size: 14px;
  color: #9e9e9e;
}
</style>
